<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .sky_father{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-bottom: 5px;
        }
        .sky_son{
            /*【1】三个值：左外，width，右外，如果只有一个是auto，那么根据总和会自动*/
            /*赋值那个auto*/
            margin-left: auto;
            width: 140px;
            margin-right: 40px;
            background-color: red;
            height: 200px;
        }
        .sky_father1{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-bottom: 5px;
        }
        .sky_son1{
            /*【2】三个值：左外，width，右外，如果没有一个是auto，总和还不一致，自动将*/
            /*右外赋值为auto，然后计算*/
            margin-left: 60px;
            width: 140px;
            margin-right: 40px;
            background-color: red;
            height: 200px;
        }
        .sky_father2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-bottom: 5px;
        }
        .sky_son2{
            /*【3】三个值：左外，width，右外，左外右外写定制，width就算不写，也是auto*/
            /*然后计算*/
            margin-left: 60px;
            margin-right: 40px;
            background-color: red;
            height: 200px;
        }
        .sky_father3{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-bottom: 5px;
        }
        .sky_son3{
            /*【4】三个值：左外，width，右外;width写死，左外和右外都是auto，居中*/
            /*【5】margin设置为负值的时候，是可能造成盒子超出浏览器的*/
            /*【6】在设置替换元素的时候，如果width为0，就是原始尺寸了，比如img。*/
            /*在设置img的时候，注意：假如我们仅仅设置了w和h中一个，另一个会等比例变*/
            margin-left: auto;
            width: 140px;
            margin-right: auto;
            background-color: red;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="sky_father">
    <div class="sky_son">
        
    </div>
</div>
<div class="sky_father1">
    <div class="sky_son1">

    </div>
</div>
<div class="sky_father2">
    <div class="sky_son2">

    </div>
</div>
<div class="sky_father3">
    <div class="sky_son3">

    </div>
</div>
</body>
</html>